<script setup lang="ts">
import { ref, computed } from 'vue'
import type { ScheduleItem, ScheduleType } from '@/types/schedule'

// 当前选中的日期
const value = ref(new Date())

// 模拟日程数据
const scheduleList = ref<ScheduleItem[]>([
  {
    id: 1,
    title: '医生预约',
    time: '09:00',
    description: '与王医生进行常规检查',
    type: 'appointment',
    date: '2023-11-15'
  },
  {
    id: 2,
    title: '服药提醒',
    time: '12:30',
    description: '午餐后服用降压药',
    type: 'medication',
    date: '2023-11-15'
  },
  {
    id: 3,
    title: '健康提醒',
    time: '18:00',
    description: '晚间散步30分钟',
    type: 'reminder',
    date: '2023-11-16'
  },
  {
    id: 4,
    title: '复诊预约',
    time: '10:30',
    description: '心脏科复诊',
    type: 'appointment',
    date: '2023-11-17'
  }
])

// 日程类型对应的图标和颜色
const scheduleTypeInfo = {
  appointment: {
    icon: 'Calendar',
    color: '#409EFF'
  },
  medication: {
    icon: 'FirstAidKit',
    color: '#67C23A'
  },
  reminder: {
    icon: 'Bell',
    color: '#E6A23C'
  }
}

// 根据日期获取当天的日程列表
const getSchedulesByDate = (date: Date) => {
  const dateString = formatDate(date)
  return scheduleList.value.filter(item => item.date === dateString)
}

// 格式化日期为YYYY-MM-DD
const formatDate = (date: Date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 获取日程类型对应的样式
const getTypeStyle = (type: ScheduleType) => {
  const info = scheduleTypeInfo[type]
  return {
    color: info.color,
    borderLeft: `3px solid ${info.color}`
  }
}
</script>

<template>
  <div class="schedule-container">
    <el-calendar v-model="value">
      <template #dateCell="{ data }">
        <div class="date-cell">
          <p class="date">{{ data.day.split('-').slice(1).join('-') }}</p>
          <div class="schedule-list">
            <div
              v-for="schedule in getSchedulesByDate(new Date(data.day))"
              :key="schedule.id"
              class="schedule-item"
              :style="getTypeStyle(schedule.type)"
            >
              <div class="schedule-time">{{ schedule.time }}</div>
              <div class="schedule-title">{{ schedule.title }}</div>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<style scoped>
.schedule-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.date-cell {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.date {
  font-size: 14px;
  margin: 0;
  padding: 4px 0;
  text-align: center;
}

.schedule-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px;
}

.schedule-item {
  padding: 4px 8px;
  margin-bottom: 4px;
  border-radius: 4px;
  background-color: rgba(245, 245, 245, 0.8);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.schedule-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.schedule-time {
  font-weight: bold;
  margin-bottom: 2px;
}

.schedule-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
